<template>
	<view class="box-content">
		<view class="nav-bar" :style="{'background':bgcolor}">
			<view class="left-icon" @click="back">
				<uni-icons type="back" :color="lefticonColor" size="20"></uni-icons>
			</view>
		
			<slot name= "center">
				<view class="title" :style="{'color':color}">
					{{title}}
				</view>
			</slot>
			
			<slot name="right" >
				<view class="right-info">
					
				</view>
			</slot>
		</view>
	</view>
</template>

<script>
	export default{
		name:"navBar",
		props:{
			title:{
				type: String
			},
			color:{
				type: String
			},
			bgcolor:{
				type: String
			},
			lefticonColor:{
				type: String,
				default:"#EF5233"
			},
			rightIcon:{
				type: String,
				default:"../../static/search/shaixuan.png"
			}
		},
		data(){
			return{
				
			}
		},
		methods:{
			back(){
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss">
	.box-content{
		height: calc(var(--status-bar-height) + 50px);
	}
	.nav-bar{
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30rpx;
		padding-top: calc(var(--status-bar-height) + 10px);
		padding-bottom: 24rpx;
		z-index: 100;
		.left-icon{
			
		}
		.title{
			font-size: 34rpx;	
			flex: 1;
			text-align: center;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
		.right-info{
			flex-grow: 1;
		}
	}
</style>